<template>
    <div class="selectNomber" :style="{ height: evieHeight}">
        <div class="search_box">
            <div class="searchLeft">
                <span class="icons iconfont iconsousuo"></span>
                <input type="text" class="searchInput" placeholder="请输入机架编号">
            </div>
            <span class="searchButton">搜索</span>
        </div>
        <!-- 列表组件 -->
        <div class="list_box">
            <div v-for="(item,index) in showList"  :key="index">
                <selectList :listData="item"></selectList>
            </div>
		</div>

        <div class="loadMore" v-if="showMore" @click="loadMoreList">点击加载更多...</div>
        <div class="placeholder"></div> 
        
        <div class="choseShow">
            <div class="box">
                <p class="chosedAll" @click="check">
                    <span class="iconfont icondanxuankuang" v-if="!isCheckAll"></span>
                    <span class="iconfont iconxuanzhong" v-else></span>
                    <span class="choseAllText">全选</span>
                </p>
                <p class="chosedNumber">
                    已选中：{{chosed}}
                </p>
                <p class="confirm">
                    <span class="text">确定</span>
                </p>
            </div>
            
        </div>
    </div>
</template>

<script>
import selectList from "./selectList";
export default {
    components:{
        selectList,
    },
    props:['List'],
    data(){
        return{
            evieHeight:"",
            chosed:10,
            isCheckAll:false,
            pagesize:50,
            pageNomber:0,
            showList:[],
            getList:[],
            showMore:false,
        }
    },
    watch: {
      list(a,b) {
        this.List = a;
      }
    },
    mounted(){
        this.initeList();
        this.evieHeight = (wx.getSystemInfoSync().windowHeight) + "px";
    },
    methods:{
        initeList(){
            this.pageNomber = 1;
            this.showList = this.pagination(this.pageNomber,this.pagesize,this.List);
        },
        check(){//全选
            this.isCheckAll = !this.isCheckAll;
        },
        pagination(pageNo, pageSize, array) {//数组分页
            var offset = (pageNo - 1) * pageSize;
            return (offset + pageSize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pageSize);
        },
        loadMoreList(){
            wx.showLoading({
                "title":"加载中..."
            });
            this.showMore = false;
            this.upToLoadList();
        },
        upToLoadList(){//上拉加载处理
            this.pageNomber++;
            let oldListShow = JSON.parse(JSON.stringify(this.List));
            let newListShow = this.pagination(this.pageNomber,this.pagesize,JSON.parse(JSON.stringify(this.List)));
            newListShow = [...oldListShow,...newListShow];
           //wx.hideLoading()
            this.showList = newListShow;
            this.showMore = false;
        }
    },
    onReachBottom(){
        this.showMore = true;
    },
    onPullDownRefresh(){
        this.pageNomber = 0;
        this.initeList();
    },
    
}
</script>

<style scoped>
.selectNomber{
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    padding-bottom:176rpx;
}
.search_box{
    display: flex;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
	position: fixed;
	top: 0;
    background-color: #FAFAFA;
}
.list_box{
	margin-top: 88rpx;
}
.searchLeft{
    width: 80%;
    height: 60rpx;
    display: flex;
    margin-left: 30rpx;
    border-radius: 30px;
    margin-top:15rpx;
    background-color: #f7f5f5;
}
.icons{
    color: #999999;
    font-size: 36rpx;
    width: 10%;
    line-height:29px;
    text-align:center;  

}
.searchInput{
    width: 90%;
	height: 50rpx;
	line-height: 50rpx;
    font-size: 28rpx;
	margin-top: 5rpx;
}
.searchButton{
    width: 15%;
    text-align: center;
    margin-right: 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #333333;
    font-size: 28rpx;
    margin-top:15rpx;
}

/*加载更多提醒*/
.loadMore{
    font-size: 28rpx;
    color: #999;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
}
.placeholder{
    width:100%;
    height: 88rpx;
}

/*底部操作*/
.choseShow{
    width: 100%;
    height: 88rpx;
    font-size: 28rpx;
    line-height: 88rpx;
    position:fixed;
    bottom:0;
    border:1px #F5F5F5 solid; 
    background-color:white;
    border-top:1px #F5F5F5 solid;
}
.choseShow .box{
    display: flex;
    width: 92%;
    margin: 0 30rpx;
}
.box p{
    flex: 1;
}
.chosedAll{
    position: relative;
}
.choseAllText{
    height: 64rpx;
    line-height: 64rpx;
    display: inline-block;
    margin-left:64rpx;
}
.chosedAll .iconfont{
    top:12rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 52rpx;
    display: inline-block;
    position:absolute;
}
.chosedNumber{
    text-align: center;
}
.confirm{
    text-align: right;
}
.confirm .text{
    width: 50%;
    color: white;
    height: 64rpx;
    border-radius: 10rpx;
    line-height: 64rpx;
    text-align: center;
    display: inline-block;
    background-color: #20C9E1FF;
}
.confirm .text:active{
    background-color: #11b3ca;
}


</style>

